<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vue 3 Hello World</title>
    <!-- 引入Vue 3 -->
    <script src="vue3.js"></script>
  </head>
  <body>
    <!-- Vue应用挂载点 -->
    <div id="app">
      <div v-show="flag">我是v-show控制的盒子flag</div>
      <div v-if="flag">我是v-if控制的盒子flag</div>
      <div v-show="!flag">我是v-show控制的盒子!flag</div>
      <div v-if="!flag">我是v-if控制的盒子!flag</div>
    </div>

    <script>
      // 创建Vue应用
      const { createApp, ref } = Vue;

      // 定义应用
      const app = createApp({
        // 创建Vue应用实例

        setup() {
          // 组合式API的入口函数
          const flag = false; // 定义布尔值变量flag，初始值为false
          return {
            flag, // 返回flag变量，供v-show和v-if指令使用
          };
        },
      });

      // 挂载应用到DOM元素
      app.mount("#app");
    </script>
  </body>
</html>
